<template>
	<view class="columnbox wdh-100 content">
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">姓名</view>
				<input placeholder-class="reg-pl" class="info-input" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">身份证</view>
				<input maxlength="18" @input="cardIdInput" placeholder-class="reg-pl" class="info-input"
					v-model="cardid" placeholder="请输入身份证号" />
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">性别</view>
				<radio-group v-model="sex" @change="sexChange">
					<radio color="#00b6b2" style="transform: scale(.7);margin-right: 40rpx;" :checked="sex=='1'"
						value="1">
						<view style="transform: scale(1.5);margin-left: 20rpx;">男</view>
					</radio>
					<radio color="#00b6b2" style="transform: scale(.7);" :checked="sex=='2'" value="2">
						<view style="transform: scale(1.5);margin-left: 20rpx;">女</view>
					</radio>
				</radio-group>
			</view>
			<picker mode="date" @change="handleChange" style="width: 100%;">
				<view class="rowbox one-info jus">
					<view class="rowbox jus">
						<view class="info-title">出生日期</view>
						<view v-if="shengri==''" class="reg-pl">请选择生日</view>
						<view v-else>{{shengri}}</view>
					</view>
				</view>
			</picker>
			<picker mode="region" @change="chooseRegion" class="wdh-100">
				<view class="rowbox one-info jus">
					<view class="info-title">城市</view>
					<view v-if="province==''" class="reg-pl">请选择城市</view>
					<view v-else>{{province}}{{city}}{{county}}</view>
				</view>
			</picker>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">手机号</view>
				<input :disabled="isLogin" placeholder-class="reg-pl" type="digit" v-model="phone" class="info-input"
					placeholder="请输入手机号" />
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">身高(单位：cm)</view>
				<input placeholder-class="reg-pl" type="digit" v-model="height" class="info-input"
					placeholder="请输入身高" />
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">体重(单位：kg)</view>
				<input placeholder-class="reg-pl" type="digit" v-model="weight" class="info-input"
					placeholder="请输入体重" />
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus als">
				<view class="info-title">既往病史</view>
				<view class="columnbox als" style="width: 500rpx;">
					<textarea placeholder-class="reg-pl" class="info-input" v-model="bingshi"
						placeholder="请输入既往病史"></textarea>
					<view class="img-list wdh-100">
						<view v-for="(item,index) in jwbsImg" :key='index' class="rowbox one-img-box"
							@click="deletImg('jwbs',index)">
							<image class="one-img" mode="aspectFill" :src="item.url"></image>
							<view class="close-icon">
								<u-icon name="close-circle-fill" size="32rpx"></u-icon>
							</view>
						</view>
						<image @click="addImg('jwbs')" class="one-img" src="/static/img/addimg.png" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus als">
				<view class="info-title">过敏史</view>
				<view class="columnbox als" style="width: 500rpx;">
					<textarea placeholder-class="reg-pl" class="info-input" v-model="guomin"
						placeholder="请输入过敏史"></textarea>
					<view class="img-list wdh-100">
						<view v-for="(item,index) in gmsImg" :key='index' class="rowbox one-img-box"
							@click="deletImg('gms',index)">
							<image class="one-img" mode="aspectFill" :src="item.url"></image>
							<view class="close-icon">
								<u-icon name="close-circle-fill" size="32rpx"></u-icon>
							</view>
						</view>
						<image @click="addImg('gms')" class="one-img" src="/static/img/addimg.png" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="rowbox wdh-100 bottom-box">
			<view v-if="submitflag" class="rowbox wdh-100 send-btn grey-btn" @click="">完成</view>
			<view v-else class="rowbox wdh-100 send-btn" @click="subscribeMessage">完成</view>
			<!-- <template v-if="isLogin">
				<view v-if="submitflag" class="rowbox wdh-100 send-btn grey-btn" @click="">完成</view>
				<view v-else class="rowbox wdh-100 send-btn" @click="submitInfo">完成</view>
			</template>
			<template v-else>
				<button v-if="!checkFlag" class="rowbox wdh-100 send-btn" @click="showCheckInfo">完成</button>
				<button v-else type="" class="rowbox wdh-100 send-btn" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">完成</button>
			</template> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				name: '',
				cardid: '',
				sex: '1',
				shengri: '',
				province: '',
				city: '',
				county: '',
				height: '',
				weight: '',
				bingshi: '',
				guomin: '',
				submitflag: false,
				jwbsImg: [],
				gmsImg: [],
				// 扫码信息
				state: 0,
				id: 0,
				subscribeflag: false, //是否已订阅
			};
		},
		onLoad(options) {
			let pid = ''
			if (options.state) {
				this.state = options.state * 1
				this.id = options.id * 1
				if (options.state * 1 == 5) {
					pid = options.id * 1
				}
			}
			// this.getRegion()

			uni.login({
				provider: 'weixin',
				success: (res) => {
					this.$req.post('/user/userlogin', {
						code: res.code,
						pid: pid
					}).then(res => {
						uni.hideLoading()
						uni.setStorageSync('memberid', res.data.data.id)
						this.getUserInfo()
					})
				},
				fail: (err) => {
					console.log('登录失败', err)
				}
			})
		},
		computed: {
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
			checkFlag() {
				return this.name != '' && this.cardid != '' &&
					this.shengri != '' &&
					this.province != '' &&
					this.height != '' &&
					this.weight != ''
			}
		},
		methods: {
			getPhoneNumber(e) {
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					uid: uni.getStorageSync('memberid')
				}
				this.$req.post('/user/phoneJm', {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					uid: uni.getStorageSync('memberid')
				}).then(res => {
					if (res.data.code == 0) {
						this.logEasemob()
						uni.showModal({
							title: '登录成功',
							success: (res) => {
								this.subscribeMessage()
							}
						})

					} else {
						uni.hideLoading()
						uni.showModal({
							title: '授权手机号失败',
							content: '请稍后再试'
						})
					}
				})
			},

			cardIdInput() {
				if (this.cardid.length == 18) {
					let num = this.cardid.substring(6, 14)
					let shengri = num.substring(0, 4) + '-' + num.substring(4, 6) + '-' + num.substring(6, 8)
					this.shengri = shengri
				}
			},
			deletImg(type, index) {
				if (type == 'jwbs') {
					this.jwbsImg.splice(index, 1)
				} else {
					this.gmsImg.splice(index, 1)
				}
			},
			addImg(type) {
				uni.chooseImage({
					success: (res) => {
						if (type == 'jwbs') {
							res.tempFilePaths.forEach(i => {
								this.jwbsImg.push({
									flag: true,
									url: i
								})
							})
						} else {
							res.tempFilePaths.forEach(i => {
								this.gmsImg.push({
									flag: true,
									url: i
								})
							})
						}
					}
				})
			},
			sexChange(e) {
				this.sex = e.detail.value
			},
			getUserInfo() {
				this.$req.post('/user/userinfo', {
					memberid: uni.getStorageSync('memberid')
				}).then(res => {
					let info = res.data.data
					this.name = info.name
					this.phone = info.phone
					this.cardid = info.cardid
					this.sex = info.sex == 0 ? '1' : info.sex + ''
					this.shengri = info.shengri
					this.province = info.province
					this.city = info.city
					this.county = info.county
					this.height = info.height == 0 ? '' : info.height
					this.weight = info.weight == 0 ? '' : info.weight
					if (info.guomin.indexOf('text') < 0) {
						this.bingshi = info.bingshi
						this.guomin = info.guomin
					} else {
						this.bingshi = JSON.parse(info.bingshi).text
						this.guomin = JSON.parse(info.guomin).text
						let jwbsimg = JSON.parse(info.bingshi).img == '' ? [] : JSON.parse(info.bingshi).img.split(
							',')
						jwbsimg.forEach(v => {
							this.jwbsImg.push({
								flag: false,
								url: v
							})
						})
						let gmsimg = JSON.parse(info.guomin).img == '' ? [] : JSON.parse(info.guomin).img.split(
							',')
						gmsimg.forEach(v => {
							this.gmsImg.push({
								flag: false,
								url: v
							})
						})
					}
				})
			},
			getRegion() {
				this.$req.post('/user/provinces').then(res => {

				})
			},
			subscribeMessage() {
				if (this.subscribeflag) {
					if (!this.isLogin) {
						this.logEasemob()
					}
					this.submitInfo()
				} else {
					if (this.isLogin) {
						this.submitInfo()
					} else {
						uni.requestSubscribeMessage({
							tmplIds: [
								'nmfwtVizTQOL3ZBqlMlsj7tv1BWIv0SNBLuFpevuRkA',
								'WKJuN8gX7gneG0IE4VVs9DbyyMQEgjQLOdPesRCVSjI'
							],
							success(res) {},
							fail(errMessage) {
								console.log("订阅消息 失败 ", errMessage);
							},
							complete: res => {
								this.subscribeflag = true
								if (!this.isLogin) {
									this.logEasemob()
								}
								this.submitInfo()
							}
						})
					}
				}
			},
			showCheckInfo() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				} else if (this.cardid == '') {
					uni.showToast({
						title: '请输入身份证',
						icon: 'none'
					})
				} else if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				// else if (this.shengri == '') {
				// 	uni.showToast({
				// 		title: '请选择生日',
				// 		icon: 'none'
				// 	})
				// } else if (this.province == '') {
				// 	uni.showToast({
				// 		title: '请选择城市',
				// 		icon: 'none'
				// 	})
				// } else if (this.height == '') {
				// 	uni.showToast({
				// 		title: '请输入身高',
				// 		icon: 'none'
				// 	})
				// } else if (this.weight == '') {
				// 	uni.showToast({
				// 		title: '请输入体重',
				// 		icon: 'none'
				// 	})
				// }
			},
			async submitInfo() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				} else if (this.cardid == '') {
					uni.showToast({
						title: '请输入身份证',
						icon: 'none'
					})
				} else if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				// else if (this.shengri == '') {
				// 	uni.showToast({
				// 		title: '请选择生日',
				// 		icon: 'none'
				// 	})
				// } else if (this.province == '') {
				// 	uni.showToast({
				// 		title: '请选择城市',
				// 		icon: 'none'
				// 	})
				// } else if (this.height == '') {
				// 	uni.showToast({
				// 		title: '请输入身高',
				// 		icon: 'none'
				// 	})
				// } else if (this.weight == '') {
				// 	uni.showToast({
				// 		title: '请输入体重',
				// 		icon: 'none'
				// 	})
				// } 
				else {
					if (!this.submitflag) {
						this.submitflag = true
						uni.showLoading({
							title: '正在提交',
							mask: true
						})
						let jwbs = []
						let gms = []
						for (var i = 0; i < this.jwbsImg.length; i++) {
							jwbs.push(await this.uploadImgList(this.jwbsImg[i]))
						}
						for (var i = 0; i < this.gmsImg.length; i++) {
							gms.push(await this.uploadImgList(this.gmsImg[i]))
						}

						this.$req.post('/user/userupdate', {
							phone: this.phone,
							name: this.name,
							cardid: this.cardid,
							sex: parseInt(this.sex),
							shengri: this.shengri,
							province: this.province,
							city: this.city,
							county: this.county,
							height: parseInt(this.height),
							weight: parseInt(this.weight),
							bingshi: JSON.stringify({
								text: this.bingshi,
								img: jwbs.join(',')
							}),
							guomin: JSON.stringify({
								text: this.guomin,
								img: gms.join(',')
							}),
							memberid: uni.getStorageSync('memberid')
						}).then(res => {
							if (res.data.code == 0) {
								this.$req.post('/user/userinfo', {
									memberid: uni.getStorageSync('memberid')
								}).then(res => {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									})
									uni.setStorageSync('userinfo', res.data.data)
									uni.setStorageSync('uid', res.data.data.id)
									this.$store.dispatch('actionsHandleUserInfoChange', res
										.data.data);
									this.$store.dispatch('actionsHandleIsLoginChange', true);
									if (this.state == 0||this.state == 5) {
										uni.hideLoading()
										uni.navigateBack()
									} else {
										if (this.state == 1) {
											this.$req.post('/user/goodorderbd', {
												id: this.id * 1,
												userid: uni.getStorageSync('uid')
											}).then(res => {
												uni.hideLoading()
												uni.navigateTo({
													url: '/packageA/chatInfo/goods?id=' +
														this.id
												})
											})
										} else if (this.state == 2) {
											this.$req.post('/user/yaofangxybd', {
												id: this.id * 1,
												userid: uni.getStorageSync('uid')
											}).then(res => {
												uni.hideLoading()
												uni.redirectTo({
													url: '/packageA/chatInfo/xiyao?type=xiyao&id=' +
														res.data.data
												})
											})
										} else if (this.state == 3) {
											this.$req.post('/user/patientadd', {
												uid: uni.getStorageSync('uid'),
												id: this.id * 1
											}).then(res => {
												uni.hideLoading()
												uni.redirectTo({
													url: '/pages/doctor/detail?id=' +
														this.id * 1
												})
												// this.$req.post('/user/siyu', {
												// 	id: this.id * 1,
												// 	uid: uni.getStorageSync('uid')
												// }).then(res => {})
											})

										} else if (this.state == 4) {
											this.$req.post('/user/yaofangzybd', {
												userid: uni.getStorageSync('uid'),
												id: this.id * 1
											}).then(res => {
												uni.hideLoading()
												uni.redirectTo({
													url: '/packageA/chatInfo/zhongyao?id=' +
														res.data.data
												})
											})
										}
									}
								})
							} else {
								uni.hideLoading()
								this.submitflag = false
								uni.showModal({
									title: '保存失败',
									content: res.data.msg
								})
							}
						})
					} else {

					}
				}

			},
			// 登录环信即时通讯
			logEasemob() {
				this.$req.post('/chat/userToken', {
					memberid: uni.getStorageSync('memberid')
				}).then(res => {
					console.log('====res=====', res)
					getApp().globalData.conn
						.registerUser({
							/** 用户 ID。 */
							username: uni.getStorageSync('memberid'),
							/** 密码。 */
							password: uni.getStorageSync('memberid')
						}).then((res) => {
							console.log('注册==========', res)
						});
					// 登录
					setTimeout(() => {
						getApp().globalData.conn
							.open({
								user: uni.getStorageSync('memberid') + '',
								accessToken: res.data.data,
							})
							.then(() => {
								console.log("========login success");
								// 登录状态
							})
							.catch((reason) => {
								console.log("=======login fail", reason);
							});
					}, 1000)
				})

			},

			uploadImgList(img) {
				return new Promise((resolve, reject) => {
					if (img.flag) {
						this.$req.uploadImg(img.url).then(res => {
							resolve(res.data.data)
						})
					} else {
						resolve(img.url)
					}
				})
			},
			chooseRegion(e) {
				this.province = e.detail.value[0]
				this.city = e.detail.value[1]
				this.county = e.detail.value[2]
			},

			handleChange(e) {
				this.shengri = e.detail.value
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.one-info {
		width: 100%;
		padding: 32rpx 32rpx;
		background: #fff;
		border-bottom: #F5F7F9 solid 1px;
		font-size: 26rpx;

		.info-title {
			font-weight: bold;
			font-size: 26rpx;
			color: #202020;
			width: 220rpx;
			margin-right: 20rpx;
		}

		.info-input {
			width: calc(100% - 240rpx);
			text-align: left;
			font-size: 26rpx;
		}

		.code-box {
			width: calc(100% - 240rpx);
		}

		.code-input {
			text-align: left;
			font-size: 26rpx;
			width: 200rpx;
		}

		.code-btn {
			font-weight: bold;
		}
	}

	.info-box {
		margin-top: 20rpx;
	}

	.add-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
	}

	.add-img-box {
		width: 140rpx;
		height: 140rpx;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		.delet-img {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			background: #fff;
			border-radius: 100rpx;
		}
	}

	.tag-list {
		height: 90vh;

		.tag-title {
			width: 100%;
			font-weight: bold;
			font-size: 32rpx;
			color: #202020;
			font-family: PingFang SC;
			margin-top: 32rpx;
		}

		.q-title {
			width: 100%;
			font-weight: bold;
			font-size: 28rpx;
			color: #202020;
			font-family: PingFang SC;
			line-height: 40rpx;
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			margin-top: 40rpx;

			text {
				color: #9b9ea0;
				font-size: 26rpx;
			}
		}

		.q-title>view:nth-child(1) {
			position: relative;
			z-index: 4;
		}

		.q-line {
			background: linear-gradient(to right, #00b6b2, rgba(#00b6b2, 0));
			width: 70rpx;
			height: 15rpx;
			margin-top: -15rpx;
		}

		.tag-list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}

	.one-tag,
	.sel-tag {
		border: #dadcdc solid 1px;
		color: #474747;
		font-size: 22rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
		line-height: 40rpx;
	}

	.sel-tag {
		border: #00b6b2 solid 1px;
		color: #202020;
		background: rgba(#bfdad9, .1);
	}

	.sel-tag-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #F5F8FB;
		padding-top: 20rpx;
	}

	.scjb-list {
		width: calc(100% - 240rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.one-jigou {
		padding: 24rpx 24rpx;

		.jg-img {
			width: 280rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
		}

		.jg-name {
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
		}

		.jg-area {
			font-weight: 400;
			font-size: 24rpx;
			color: #5F5F5F;
			margin-top: 40rpx;
			width: 100%;
		}
	}

	.search-box {
		padding: 32rpx 36rpx;
		background: #fff;

		.search-info {
			width: 100%;
			height: 70rpx;
			border: #00b6b2 solid 1px;
			border-radius: 100rpx;
			padding-left: 20rpx;

			input {
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}

		.search-btn {
			width: 110rpx;
			height: 50rpx;
			background: linear-gradient(to right, #01a7a1, #5acbc1);
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #fff;
			margin-right: 10rpx;
		}
	}



	.img-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.one-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.one-img-box {
		width: 100rpx;
		height: 100rpx;
		margin-right: 40rpx;
		position: relative;
	}

	.close-icon {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 100rpx;
		background: #fff;
	}

	.grey-btn {
		background: #dee3e7;
	}
</style>
<style>
	.reg-pl {
		color: #939BA7;
	}
</style>